<template>
  <a-table
    :columns="fileColumns" :data-source="fileTalbe" bordered :pagination="false"
  >
    <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
    <span slot="fileName" slot-scope="text, record, index" :class="text=='施工方案电子版' || text=='相关会签表'?'requireX':''">
       {{ text}}
    </span>
    <template slot="fileList" slot-scope="text, record">
      <div v-for="(item, index) in fileInfoTemp[record.id]">
        <a-popover
          :key="item.fileId"
          placement="top"
        >
          <template slot="content">
            <a
              :fileId="item.fileId"
              :fileName="item.fileName + item.suffixName"
              :href="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + item.fileId"
              target="_parent"
            >下载</a>
            <a-divider type="vertical" />
            <a
              :key="item.fileId"
              @click="$filePreview(item)"
            >查看</a>
          </template>
          <a-button
            size="small"
            type="link"
          >
            {{ item.fileName + item.suffixName }}
          </a-button>
        </a-popover>
        <a-icon
          v-if="(!disabled)"
          style="cursor: pointer; margin-left: 6px; color: #40a9ff;"
          :type="'close'"
          @click="deleteFiles(item, record.id)"
        />
        <!-- {{item.fileName + item.suffixName}} -->
      </div>
    </template>
    
    <template slot="operation" slot-scope="text, record">
      <a-upload
        v-if="!disabled"
        name="file"
        :custom-request="handleUpload"
        :before-upload="beforeUpload"
        :show-upload-list="false"
      >
        <a :disabled="uploadLoading" @click="currentRow=record.id">
          附件上传
          <!-- <a-icon v-if="uploadLoading" :type="'loading'" style="color: #1890ff" /> -->
        </a>
      </a-upload>
    </template>
  </a-table>
</template>

<script>
import Vue from 'vue'
import { uploadFile, deleteFile } from '@/api'
const fileColumns = [
  {
    title: '序号',
    width: '65px',
    scopedSlots: { customRender: 'serial' },
  },
  {
    title: '文件名称',
    width: '200px',
    dataIndex: 'fileName',
    scopedSlots: { customRender: 'fileName' }
  },
  {
    title: '文件',
    dataIndex: 'fileList',
    scopedSlots: { customRender: 'fileList' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '120px',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
    name:'a'+Date.now(),
    components: {
    },
    data() {
        return {
            token: Vue.getAcloudProvider().getAccessToken(),
            fileColumns,
            currentRow: null,
            uploadLoading: false,
            fileInfoTemp: {
              '1': [],
              '2': [],
              '3': [],
              '4': []
            }
        }
    },
    props: {
      // 上传文件的业务编码
      businessCode: {
        type: String,
        require: true,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      fileInfo: {
        type: [Object, null],
        default: null
      },
      fileTalbe:{
        type:Array,
        default:[]
      }
    },
    watch: {
      fileInfo: {
          immediate: true,
          handler(val) {
            // console.log(val)
              if (val) {
                for(let idx in this.fileInfoTemp) {
                  if (val[idx]) this.fileInfoTemp[idx] = val[idx]
                }
                // console.log(this.fileInfoTemp)
              }
          },
      },
    },
    computed: {
      editable() {
        return this.$route.query.type == 'add' || this.$route.query.type == 'edit'
      }
    },
    created() {
      // console.log(this.fileInfo)
    },
    methods: {
      beforeUpload(info) {
        const { size } = info
        if (size / 1024 / 1024 > 500) {
          this.$message.warning('上传文件不可超出500M')
          return false
        }
        return true
      },
      async handleUpload(options) {
        // console.log(options)
        // return
        try {
        console.log(this.currentRow)
          if (this.uploadLoading) return
          this.uploadLoading = true
          const formData = new FormData()
          formData.append('file', options.file)
          formData.append('businessCode', this.businessCode)
          const res = await uploadFile(formData)
          this.$message.success('上传成功')
          options.onSuccess() // 调用回调，避免一直loading
          console.log(this.fileInfoTemp)
          this.fileInfoTemp[this.currentRow].push(res.data)
          this.$emit('fileArrysData', this.fileInfoTemp)
          // this.refreshTable()
        } catch (e) {
          console.error(e)
          options.onError() // 调用回调，避免一直loading
        }
        this.uploadLoading = false
      },
      deleteFiles(data, recordId) {
        this.$confirm({
          title: '删除',
          content: '确定删除附件吗？',
          onOk: async () => {
            await deleteFile([ data.commonId ])
            this.$message.success('删除成功')
            const targetIndex = this.fileInfoTemp[recordId].findIndex((item) => item.commonId === data.commonId)
            if (targetIndex > -1) {
              this.fileInfoTemp[recordId].splice(targetIndex, 1)
            }
            this.$emit('fileArrysData', this.fileInfoTemp)
          }
        })
      }
    },
}
</script>

<style lang="less">
</style>
